<template>
  <el-dialog title="退款明细" :visible.sync="dialogFormVisible" width="500px">
    <div class="container">
      <div class="card" v-for="(item, index) in list" :key="item.id">
        <div class="number">{{ index + 1 }}</div>
        <div class="card-content">
          <ul>
            <li>
              <p class="label">退款时间:</p>
              <p class="value">{{ item.refund_time }}</p>
            </li>
            <li>
              <p class="label">退款状态:</p>
              <p class="value" v-if="item.status === 'refund_ing'">退款中</p>
              <p class="value success" v-if="item.status === 'success'">退款成功</p>
              <p class="value error" v-if="item.status === 'fail'">退款失败</p>
            </li>
            <li>
              <p class="label">退款入账账户:</p>
              <p class="value">{{ item.refund_received_account }}</p>
            </li>
            <li>
              <p class="label">退款金额:</p>
              <p class="value">{{ item.amount }}元</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getRefundInfo } from '@/api/orders'

export default {
  name: 'Refund',
  components: {},

  data() {
    return {
      dialogFormVisible: false,
      order_number: '',
      list: []
    }
  },

  created() {},
  methods: {
    show(number) {
      this.order_number = number
      getRefundInfo({ order_number: number }).then((res) => {
        this.list = res.data
      })
      this.dialogFormVisible = true
    }
  }
}
</script>
<style scoped lang="less">
.container {
  height: 500px;
  overflow-y: scroll;
}
.card {
  position: relative;
  padding: 10px 0;
  .number {
    color: rgba(0, 10, 26, 0.68);
    background-color: #fff;
    padding: 5px 10px;
    height: 20px;
    position: absolute;
    top: -3px;
    left: 20px;
  }
  .card-content {
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    padding: 15px 20px;
    li {
      line-height: 30px;
      display: flex;
      align-items: center;
      .label {
        color: rgba(0, 10, 26, 0.68);
        width: 100px;
      }
      .value {
        color: #000a1a;
        &.success {
          color: #2aa23e;
        }
        &.error {
          color: #dc4a4a;
        }
      }
    }
  }
}
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
/deep/ .el-dialog__body {
  padding-top: 0;
}
</style>
